<template>
    <div>
        <!-- 搜索框 -->
        <div class="search-box">
            <input type="text" placeholder="请输入"  class="inputs">
            <button>搜索</button>
        </div>
       <VindicateItem :list="list"></VindicateItem>
    </div>
</template>

<script>
import VindicateItem from './components/vindicate-Item.vue'
import { getVindicateList } from '@/api/vindicate'
export default {
    components: {
        VindicateItem
    },
    name: 'SchoolForumIndex',
    data() {
        return {
            list: [], // 表白墙列表
            params: {
                sort: 'asc',
                keyword: '',
                page: 1,
                size: 10
            }
        };
    },
    created() {
        this.getList()
    },
    mounted() {
        
    },
    methods: {
        async getList () {
            const { list } = await getVindicateList(this.params)
            this.list = list
            console.log(list)
        }
    },
};
</script>

<style lang="scss" scoped>
.search-box {
    display: flex;
    align-items: center;
    width: 400px;
    .inputs {
    display: block;
    width: 250px;
    height: 50px;
    margin: 20px 0;
    border-radius: 10px;
    border: 0;
    background-color: rgb(210 223 237);
    color: rgb(80, 82, 84);
    font-family: "Century Gothic", Times, serif;
    outline: none;
    padding: 20px;
    box-sizing: border-box;
    font-size: 20px;
      }

      button {  
                width: 100px;
                height: 50px;
                background-color: rgb(68, 96, 241);
                border-radius: 10px;
                font-size: 15px;
                color: #fff;
                border: 0;
                font-weight: 600;
                margin: 20px 0;
                margin-left: 20px;;
                cursor: pointer;
                box-shadow: -20px 28px 42px 0 rgba(62, 145, 255, 0.37);
                font-family: "Century Gothic", Times, serif;
            }
}
</style>